<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学生信息管理</title>
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <h1>新增学员</h1>
    <form class="info" autocomplete="off">
        姓名：<input type="text" class="uname" name="uname" /> 年龄：
        <input type="text" class="age" name="age" /> 性别:
        <select name="gender" class="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select> 薪资： <input type="text" class="salary" name="salary" /> 就业城市：
        <select name="city" class="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="曹县">曹县</option>
      </select>
        <button class="add">录入</button>
    </form>

    <h1>就业榜</h1>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
        </tbody>
    </table>
    <script>
        const tbody = document.querySelector('tbody');
        const form = document.querySelector('form');
        const items = form.querySelectorAll('[name]')
        
        const arr = JSON.parse(localStorage.getItem('info')) ||[{
            stuId: 1001,
            uname: '欧阳霸天',
            age: 19,
            gender: '男',
            salary: '20000',
            city: '上海',
        }]
         const render = function(data,index){
           const list= data.map(function(item){
                const str =`<tr>
          <td>${item.stuId}</td>
          <td>${item.uname}</td>
          <td>${item.age}</td>
          <td>${item.gender}</td>
          <td>${item.salary}</td>
          <td>${item.city}</td>
          <td>
            <a href="javascript:" data-id="${index}">删除</a>
          </td>
        </tr> `
        return str
            })
            tbody.innerHTML=list.join('')
         }
         render(arr)
         form.addEventListener('submit',function(e){
            e.preventDefault()
            for(let i = 0;i<items.length;i++){
                if(items[i].value===''){
                    return alert('请输入有效数组')
                }
            }
            const obj = {
                stuId:arr[arr.length-1]?.stuId+1||1,
                uname:items[0].value,
                age:items[1].value,
                gender:items[2].value,
                salary:items[3].value,
                city:items[4].value,
            }
            // console.log(obj);
            arr.push(obj)
            render(arr)
            localStorage.setItem('info',JSON.stringify(arr))
            this.reset()
         })
         tbody.addEventListener('click',function(e){
            if(e.target.tagName==='A'){
                const num = e.target.dataset.id
                arr.splice(num,1)
                render(arr)
                localStorage.setItem('info',JSON.stringify(arr))
            }
         })
        

     
    </script>
</body>

</html>